<template>
  <div v-cloak class="wrapper">
    <p>程序员的计算器</p>
    <el-drawer
      size="32%"
      :with-header="false"
      :append-to-body="true"
      :visible.sync="isFolding"
      :modal-append-to-body="false"
    >
      123
    </el-drawer>
    <div class="container">
      <div class="main">
        <Header />
        <Panel />
      </div>
      <Aside />
    </div>
  </div>
</template>
<script>

import Header from '@/components/Header';
import Panel from '@/components/Panel';
import Aside from '@/components/Aside';
export default {
  components: {
    Header,
    Aside,
    Panel
  },
  data() {
    return {
      isFolding: false,
    }
  },
  computed: {},
  watch: {},
  mounted() {
  },
  methods: {
    folding() {
      this.isFolding = !this.isFolding
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/theme.scss';
.wrapper {
  padding: 20px;
  user-select: none;
}
.container {
  display: flex;
}
.main {
  flex: 1;
}
.aside {
  width: 300px;
}

</style>